<template>
	<view class="credit-cont">
		<view class="credit-cont-head flex f-a-center">
			<image class="credit-cont-head-pic" :src="orderData.pay_for_avatar"></image>
			<view class="credit-cont-head-info">
				<view class="credit-cont-head-info-name">{{orderData.pay_for_realname}}</view>
				<view class="credit-cont-head-info-text">“我相中了漂亮的好物，快来帮我付款吧！”</view>
			</view>
		</view>	
		<view class="credit-cont-order flex f-a-center f-j-center">
			<view v-if="orderData.pay_for_amount">
				<view class="credit-cont-order-text">代付金额</view>
				<view class="credit-cont-order-money">￥{{orderData.pay_for_amount||0}}</view>
			</view>
		</view>
		<view class="credit-cont-goods">
			<view class="credit-cont-goods-title">代付订单信息</view>
			<view class="credit-cont-goods-name" v-if="orderData.goods_name">{{orderData.goods_name}}</view>
			<view class="credit-cont-goods-money" v-if="orderData.shop_price">￥{{orderData.shop_price}}</view>
		</view>
		<view class="credit-cont-redBtn" v-if="orderData.pay_status == 1" @tap="takeEnvelopes()">领取红包</view>
		<!-- <view class="credit-cont-tips">
			<view class="credit-cont-tips-title">代付说明：</view>
			<view class="credit-cont-tips-text">
			</view>
		</view> -->
		
		<block v-if="orderData.pay_status == 0 && loadData.pagetype != 'self'">
			<view class="credit-cont-btn flex f-j-center f-a-center" @tap="showToggle('open')"><text>慷慨解囊</text></view>
		</block>
		<block v-else>
			<navigator open-type="switchTab" hover-class="none" url="/pages/jewel/index/index" class="credit-cont-btn flex f-j-center f-a-center"><text>返回首页</text></navigator>
		</block>
		<block v-if="orderData.pay_status == 1">
			<view class="credit-cont-btn flex f-j-center f-a-center"><text>已代付</text></view>
		</block>
		<view class="credit-cont-btn-bg"></view>
		
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="isShowMark"/>
		<uni-transition :duration="500" :mode-class="['slide-bottom','fade']" :styles="transfromClass" :show="transShow">
			<view class="pay-box">
				<view @tap="showToggle('close')"><close class="pay-box-close" size="32" color="#535353"></close></view>
				<view class="pay-box-title">支付方式</view>
				<view class="pay-box-cont">
				    <view class="pay-box-cont-item" @tap="choosePay(item.type)" v-for="(item,index) in payList" :key="index">
						<view class="pay-box-cont-item-info">
							<image :src="item.icon_text"></image>
							<view class="pay-box-cont-item-info-text">{{item.name}}</view>
						</view>
						<view class="pay-box-cont-item-icon">
							<image :src="paytype == item.type ? '../../static/icons/pay-select-act.png' : '../../static/icons/pay-select.png'"></image>
						</view>
				    </view>
				</view>
				<view class="pay-box-btn" :class="{gay:!paytype}" @tap="pushOrder">确认</view>
			</view>
		</uni-transition>
		
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="isShowRed">
			<view class="lottery-redpack">
				<image class="lottery-redpack-bg" src="../../static/images/lottery_draw/redpack_bg3.png" mode="widthFix"></image>
				<view class="lottery-redpack-tips">
					<view class="lottery-redpack-tips-text">获得</view>
					<view class="lottery-redpack-tips-entext">商家红包</view>
					<view class="lottery-redpack-tips-money">￥{{redPackMoney}}</view>
				</view>
				<view class="lottery-redpack-close"><image src="../../static/icons/jewel/sign_close.png" @tap="showToggle('closeRed')"></image></view>
			</view>
		</uni-transition>
		
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				creditData:{},
				modeClass:['fade'],
				isShowMark:false,
				transShow:false,
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'z-index':11
				},
				maskClass: {
					'position': 'fixed',
					'z-index':9,
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				payList:[],
				paytype:'',
				orderData:{},
				isShowRed:false,
				redPackMoney:0
			};
		},
		methods: {
			getData(){
				let that = this
				jewel.post('credit_bill/all_pay',{},true,function(res){
					uni.hideLoading()
					if(res.data.code == 0){
						that.creditData = res.data.data
					}
				})
			},
			pushOrder(){
				let that = this
				if(!that.paytype) return false
				that.showToggle('close')
				uni.showLoading({
					title:'支付中...',
					mask:true
				})
				let data = {
					source:that.loadData.source,
					order_no:that.loadData.order_no,
					type:that.paytype,
				}
				jewel.post('order/order',data,true,function(res){
					let billdata = res.data
					setTimeout(()=>{
						uni.hideLoading()
						if(billdata.code == 0){
							uni.requestPayment({
								provider: that.paytype,
								orderInfo: billdata.data.paydata, //微信、支付宝订单数据,
								success: (res) => {
									jewel.showToast('支付成功',1500)
									that.loaddata()
								},
								fail: (res) => {
									console.log(JSON.stringify(res))
									jewel.showToast('支付失败');
								}
							})
						}else if(billdata.code == 3){
							jewel.showToast(billdata.msg,1500)
							setTimeout(()=>{
								that.loaddata()
							},1500)
						}else{
							jewel.showToast(billdata.msg)
						}
					},1000)
				})
			},
			showToggle(type){
				this.isShowMark = !this.isShowMark
				switch(type){
					case 'open':
						this.transShow = true
					break;
					case 'close':
						this.transShow = false
					break;
					case 'showRed':
						this.isShowRed = true
					break;
					case 'closeRed':
						this.isShowRed = false
					break;
				}
			},
			choosePay(e){
				this.paytype = e
			},
			loaddata(type){
				let that = this
				uni.showLoading({
					title:'加载中...'
				})
				jewel.post('order/pay_for_detail',{order_no:that.loadData.order_no},true,function(res){
					uni.hideLoading()
					if(res.data.code == 0){
						that.orderData = res.data.data
						if(type == 'load'){
							jewel.post('Payment/payList',{repay:1,goods_id:that.orderData.goods_id},true,function(res){
								that.payList = res.data.data
							})
						}
					}else{
						jewel.showToast(res.data.msg)
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			},
			takeEnvelopes(){
				let that = this
				uni.showLoading({
					title:'领取中...',
					mask:true
				})
				jewel.post('order/get_merchant_benefit',{order_no:that.loadData.order_no},true,function(res){
					setTimeout(()=>{
						uni.hideLoading()
						if(res.data.code == 1){
							that.showToggle('showRed')
							that.redPackMoney = res.data.merchant_benefit
						}else{
							jewel.showToast(res.data.msg)
						}
					},1000)
				})
			}
		},
		onLoad(option) {
			let that = this
			that.loadData = option
			that.loaddata('load')
		}
	};
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100vh !important;
		background: #e1e4e2;
	}
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.credit-cont{
		// background-color: #e1e4e2;
		&-head{
			background-color: #0aac2a;
			color: #FFFFFF;
			height: 168rpx;
			&-pic{
				width: 84rpx;
				height: 84rpx;
				margin: 0 18rpx 0 32rpx;
				border-radius: 50%;
			}
			&-info{
				&-name{
					font-size: 34rpx;
				}
				&-text{
					font-size: 28rpx;
				}
			}
		}
		&-order{
			background-color: #FFFFFF;
			flex-wrap: wrap;
			height: 220rpx;
			text-align: center;
			margin-bottom: 16rpx;
			&-text{
				font-size: 28rpx;
			}
			&-money{
				font-size: 50rpx;
			}
		}
		&-goods{
			background-color: #FFFFFF;
			font-size: 30rpx;
			padding: 0 35rpx{
				bottom: 170rpx;
			};
			&-title{
				font-size: 30rpx;
				padding: 30rpx 0;
			}
			&-money{
				font-size: 32rpx;
				padding-top: 20rpx;
			}
		}
		&-tips{
			padding: 40rpx;
			&-title{
				font-size: 28rpx;
				color: #555454;
			}
		}
		&-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 165rpx;
			text-align: center;
			background-color: #FFFFFF;
			text{
				color: #FFFFFF;
				background-color: #0aac2a;
				font-size: 36rpx;
				display: block;
				width: 695rpx;
				line-height: 98rpx;
			}
			&-bg{
				width: 100%;
				height: 165rpx;
			}
		}
		&-redBtn{
			width: 700rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			color: #FFFFFF;
			border-radius: 50px;
			background-color: #ef2626;
			margin: 0 auto;
			margin-top: 47rpx;
		}
	}
	.pay-box{
		z-index: 10;
		background-color: #FFFFFF;
		border-radius: 15px 15px 0 0;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		left: 0;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		&-close{
			position: absolute;
			right: 26rpx;
			top: 30rpx;
			z-index: 11;
		}
		&-title{
			color: #252525;
			text-align: center;
			font-size: 38rpx;
			line-height: 122rpx;
		}
		&-btn{
			width: 636rpx;
			height: 94rpx;
			line-height: 94rpx;
			border-radius: 50px;
			margin: 0 auto;
			text-align: center;
			font-size: 40rpx;
			color: #FFFFFF;
			background-color: #0aac2a;
			margin-top: 36rpx;
		}
		&-cont{
			&-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				&-info{
					display: flex;
					align-items: center;
					image{
						width: 74rpx;
						height: 74rpx;
					}
					&-text{
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
				&-icon{
					image{
						width: 43rpx;
						height: 43rpx;
						display: block;
					}
				}
			}
		}
	}
	.lottery-redpack{
		width: 530rpx;
		height: 652rpx;
		position: relative;
		z-index: 10;
		&-bg{
			width: 530rpx;
			height: 652rpx;
			position: absolute;
			z-index: -1;
			top: 0;
			left: 0;
		}
		&-tips{
			width: 100%;
			text-align: center;
			&-text{
				font-size: 57rpx;
				color: #ebae38;
				margin-top: 50rpx;
			}
			&-entext{
				font-size: 57rpx;
				color: #ebae38;
				margin-top: 120rpx;
			}
			&-money{
				margin-top: 50rpx;
				font-size: 110rpx;
				color: #fbd41f;
				text-shadow:0px 4px 0px rgba($color: #5f5f5f, $alpha: 0.34);
			}
		}
		&-close{
			width: 86rpx;
			height: 86rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			display: block;
			position: absolute;
			bottom: -150rpx;
			left: 50%;
			transform: translateX(-50%);
			image{
				width: 86rpx;
				height: 86rpx;
			}
		}
	}
</style>
